<template>
	<vk-data-dialog
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		:close-on-click-modal="true"
		mode="form"
		:show-header="false"
		@open="onOpen"
		@closed="onClose"
	>

	<view style="padding: 20px;" >
		<!-- 页面主体内容开始 -->
			<el-divider content-position="left">商品库存</el-divider>
			<view style="display: flex;height: 30px;" v-if="form1.data.sku_list.length > 1">
				<view class="uni-item">统一库存</view>
				<view	class="uni-item">
					<vk-data-input-number v-model="unifiedStock" size="mini" :precision="0" placeholder="请输入统一库存" @blur="allStockSet" :clearable="false" class="sku-input" ></vk-data-input-number>
				</view>
			</view>

			<view style="display: flex;height: 30px;margin-top: 5px;" v-for="(item, index) in form1.data.sku_list" :key="index">
				<view style="justify-content: center;align-items: center;display: flex;flex: 1;">
					{{ item.sku_name }}
				</view>
				<view style="justify-content: center;align-items: center;display: flex;flex: 1;">
					<vk-data-input-number v-model="item.stock" size="mini" :precision="0" placeholder="输入库存" :clearable="false" class="sku-input"></vk-data-input-number>
				</view>
			</view>

			<view style="display: flex;height: 30px;margin-top: 5px;" v-if="form1.data.sku_list.length > 1">
				<view style="justify-content: center;align-items: center;display: flex;flex: 1;"> 合计 </view>
				<view style="justify-content: flex-start;align-items: center;display: flex;flex: 1;font-size: 12px;" > {{ stockCom }} </view>
			</view>

			<view style="display: flex;margin-top: 20px;" >
				<view style="flex: 1;text-align: center;">
					<el-button size="mini" type="info"  @click="value.show=false" >取消</el-button>
				</view>
				<view style="flex: 1;text-align: center;" >
					<el-button size="mini" type="primary"  @click="submitForm" :loading="loadingSave"  >保存</el-button>
				</view>
			</view>
			
			<i slot="reference" size="large" class="el-icon-edit" style="transform: scale(1.1);color: #409eff;font-weight: bold;float: right;line-height: 20px;cursor: pointer;margin-right: 20px;" ></i>
	</view>
		<!-- 页面主体内容结束 -->
	</vk-data-dialog>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item: {}
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			unifiedStock:"",
			loadingSave:false,
			// 页面数据
			page: {
				title: "商品库存",
				submitText: "确定",
				cancelText: "关闭",
				showCancel: true,
				top: "14vh",
				width: "400px"
			},
			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {
					sku_list:[]
				},
				// 表单属性
				props: {}
			}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { item={} } = that.value;
			that.form1.data = vk.pubfn.copyObject(item);
		},
		// 监听 - 页面关闭
		onClose() {
		},
		// 监听 - 提交成功后
		onFormSuccess() {
			// 手动修改数据
			that.value.item.sku_list = vk.pubfn.copyObject(that.form1.data.sku_list);
			that.value.show = false; // 关闭页面
			that.$emit("success");
		},
		submitForm() {
			vk.callFunction({
				url: 'admin/business/sys/goods.updateGoodsSkuStock',
				loading:{ that, name:"loadingSave" },
				data:{
					_id:that.form1.data._id,
					sku_list:that.form1.data.sku_list,
				},
				success:data=>{
					that.$message({
						message: '操作成功!',
						type: 'success'
					});
					that.onFormSuccess();
				}
			});
		},
		allStockSet(){
			if(vk.pubfn.isNotNull(that.unifiedStock)){
				that.form1.data.sku_list.map((item,index)=>{
					item.stock = that.unifiedStock;
				});
			}
		}
	},
	watch: {

	},
	// 计算属性
	computed: {
		stockCom(){
			let stock = 0;
			let { sku_list=[] } = this.form1.data;
			sku_list.map((item, index) => {
				stock += item.stock;
			});
			return stock;
		}
	}
};
</script>

<style lang="scss" scoped>
.uni-item{
	justify-content: center;
	align-items: center;
	display: flex;
	flex: 1;
	background-color: #F8F8F8;
}
</style>
